<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <!-- 通过vm对象的$watch()或watch配置来监视指定的属性 -->
       <!-- 当属性的值发生变化时，回调函数自动调用，在函数内部进行计算 -->
        <h1>数字a{{numbers.a}}</h1>
       <button @click = "add">点我让数a字加1</button>

       <h1>数字b{{numbers.b}}</h1>
       <button @click = "numbers.b++">点我让数字b加1</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
           isHot:true,
           numbers:{
               a:1,
               b:2
           }
        },
        methods:{
            add(){
                this.numbers.a = this.numbers.a +1;
            }
        },
        watch:{
            // 监视多个级别的某个值的变化，这时候加上引号
            'numbers.a':{
                handler(){
                    console.log("a加了")
                }
            },
            numbers:{
                // 深度监视，你不开监视一个对象只要地址不变就不算变，开了里面的属性变了也算变了
                deep:true,
                handler(){
                    console.log("numbers发生了改变")
                }
            }
        }
    })



</script>
</html>